<template>
  <div class="root">
    <ul class="clear">
      <li class="logo">
        <router-link to="/">
          <img src="~assets/logo.png" alt="" width="150px">
        </router-link>
      </li>
      <li class="nav" v-for="nav in Object.keys(masterBranchMap)" :key="nav">
        <a href="javascript:void (0)" v-text="masterBranchMap[nav]"></a>
      </li>
      <li class="search">
        <el-input v-model="search"
                  :placeholder="recommend"
                  prefix-icon="el-icon-search"
                  maxlength="36"
        ></el-input>

      </li>
    </ul>
    <div class="branch">
      a
    </div>
  </div>
</template>

<script>
  export default {
    name: "TopNavigation",
    data() {
      return {
        search: '',
        recommend: '推荐搜索',
        //6个标签，其中最后一个可变
        masterList: [
          {tag: '新品系列', path: '#'},
          {tag: '女士', path: '#'},
          {tag: '男士', path: '#'},
          {tag: '生活艺术', path: '#'},
          {tag: 'MAGAZINE', path: '#'},
          {tag: 'LOUIS 200', path: '#'},
        ],


        //主分支
        masterBranchMap:{},
        //  分支
        branchVisibleFlag: false,
        branchList:[],
        masterToBranchMap:{},
      }
    },
    mounted() {

    },
    created() {
      /*获取商品分类信息*/
      this.$axios.get('/commodityClassify/getCommodityBranchInfo')
        .then(resp=>{
          const respData = resp.data;
          this.masterBranchMap = respData.data.masterBranchMap;
          this.branchList = respData.data.branchList;
          this.masterToBranchMap = respData.data.masterToBranchMap;
          console.log(this.masterBranchMap);
          console.log(this.branchList)
          this.tset(this.masterToBranchMap)
        })
    }
    ,
    methods:{
      tset(data){
        Object.keys(data).forEach(e=>{
          console.log(e);
        })
      }
    }
  }
</script>

<style scoped>

  .root {
    height: 70px;
    box-shadow: inset 0 -1px 0 0 #eae8e4;
    position: relative;
  }

  li {
    float: left;
    height: 70px;
    line-height: 70px;
  }

  .logo {
    width: 240px;
    padding: 0 43px;
    box-sizing: border-box;
  }

  .nav {
    font-weight: 500;
    font-size: 0.73125rem;
    margin-right: 30px;
  }

  .nav:hover {
    box-shadow: inset 0 -1px 0 0 black;
  }

  .search {
    position: absolute;
    right: 43px;
  }

  .el-input >>> .el-input__inner {
    border: none;
    background-color: #f6f5f3;
    font-size: 1rem;
    line-height: 2.75rem;
    height: 2.75rem;
    width: 380px;
    border-radius: 0.375rem;
    outline: none;
    padding: 0 1rem 0 2.75rem;
    font-weight: 300;
    color: #19110b;
    flex: 1 1 auto;
  }

  .branch {
    height: 532px;
    background-color: fuchsia;
  }
</style>
